<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-model控制其他表单属性的值
-->
<style>

</style>

<body>
    <div id="app">
        小黑学习网注册
        <div>
            <label>姓名：</label>
            <input type="text" v-model="name">
        </div>
        <div>
            <label>兴趣爱好</label>
            <label>
                <input type="checkbox" name="hobby" value="篮球" v-model="bas"/>篮球
            </label>
            <label>
                <input type="checkbox" name="hobby" value="足球" v-model="soc" />足球
            </label>
        </div>
        <div>
            <label>性别：</label>
            <input type="radio" value="男" name="sex" v-model="sex">男
            <input type="radio" value="女" name="sex" v-model="sex">女
        </div>
        <div>
            <label>所在城市：</label>
            <select v-model="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option>
            </select>
        </div>

        <div>
            <label>自我描述</label>
            <input type="textarea" v-model="des">
        </div>
        <button @click="sub">提交</button>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                name: '',
                bas:false,
                soc:false,
                hobby: '',
                sex: '',
                city: '',
                des: ''

            },
            methods: {
                sub() {
                    console.log(this.name)
                    console.log(this.hobby)
                    console.log(this.sex)

                    console.log(this.city)

                    console.log(this.des)

                }
            }
        })
    </script>

</body>

</html>